<template>
  <div>
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-menu-item index="/index">首页</el-menu-item>
      <el-menu-item index="/itemRecommend">电影推荐</el-menu-item>
      <el-menu-item index="/myCollection">我的收藏</el-menu-item>
      <el-menu-item index="/myRate">我的评分</el-menu-item>
      <el-menu-item index="/MyComment">我的评论</el-menu-item>
      <el-menu-item index="/MyOrder">订单管理</el-menu-item>
      <el-submenu index="3">
        <template slot="title"> <el-avatar :src="user.headImage"></el-avatar> <el-avatar src="/images/vip.png" v-if="isVip"></el-avatar></template>
        <el-menu-item index="/updateInfo">信息修改</el-menu-item>
        <el-menu-item index="/toVip">升为会员</el-menu-item>
        <el-menu-item @click="dialogFormVisible = true">密码修改</el-menu-item>
        <el-menu-item @click="logout">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
    <el-dialog title="修改密码" :rules="rules" ref="form" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="原始密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPassword">
          <el-input v-model="form.newPassword" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="configPassword">
          <el-input v-model="form.configPassword" autocomplete="off" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      isVip:false,
      user: this.$store.getters.getUser,
      activeIndex: '1',
      activeIndex2: '1',
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        userId:this.$store.getters.getUser.id,
        password: '',
        newPassword: '',
        configPassword: ''
      },
      rules: {
        newPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 18, message: '长度在 4 到 18 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 18, message: '长度在 4 到 18 个字符', trigger: 'blur' }
        ],
        configPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 18, message: '长度在 4 到 18 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      //点击导航栏  路由到相应的页面
      this.$router.push(key)

    },
    logout() {
      debugger;
      const _this = this
      _this.$store.commit("REMOVE_INFO")
      _this.$router.push("/login")
    },
    submitForm(formName) {
          const _this = this
      if(this.form.password)
          //先验证新密码和确认密码是否一致
          if (this.form.newPassword === this.form.configPassword) {
            //再验证原密码是否正确
            _this.$axios.post("/checkPassword", this.form).then(res => {
              console.log(res)
              if (res.data.data === true) {
                this.form.password = this.form.newPassword;
                _this.$axios.post("/changePassword", this.form).then(res => {
                  if (res.data.code === 200) {
                    this.$message({
                      showClose: true,
                      message: '修改密码成功',
                      type: 'success'
                    });
                    this.dialogFormVisible = false
                    //路由到登录页面
                    this.$router.push("/login")
                  } else {
                    this.$message.error(res.data.message);

                  }
                });
              } else {
                this.$message.error("原始密码不正确");
              }
            });
          } else {
            this.$message.error("新密码和确认密码不一致");
          }
    },

  },
  created(){
    const isVip=this.$store.getters.getUser.isVip
    if(isVip === 1){
      this.isVip = true
    }
  }

}
</script>
